{include file="common/head"}
<head>
  <title>学费设置</title>
  <link rel="stylesheet"    href="https://cdnjs.cloudflare.com/ajax/libs/jodit/3.24.2/jodit.es2018.min.css"/>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jodit/3.24.2/jodit.es2018.min.js"></script>    
  <style type="text/css">
    #top{background: initial;border-bottom:1px solid rgba(0,0,0,0.1);max-width: 1000px;}
    #mask{display:none;}
    .mb-3{margin-bottom:5px!important;}
    #item-form{position:fixed; top:5%;left:10%;  padding: 10px 20px;display: none;z-index: 20;background: #fff;width:800px;}
  </style>    
</head>
<body style="max-width: 900px;">
    <div class="" style="padding:20px;">
      <h2>收款项目设置  <a href='/index.php/refund/config'>红包设置</a> <a href='/index.php/refund/voucher_list'>优惠券设置</a></h2>

<hr/>
<form method="post" id="city_query" action="/cat/fee_setup" style="margin-bottom:5px;">
  <div  >
    <label for="prov">选择省份</label>
    <select name="prov" id="prov" class="form-control" style="width:140px;display: initial;">
      <option value="">不选</option>
      {foreach $provs as $k=>$v}
        <option value="{$v['id']}" {if $prov==$v['id']}selected{/if}>{$v['name']}</option>
      {/foreach}
    </select>

    <label for="citys">选择城市</label>
    <select name="city" id="citys" class="form-control" style="width:140px;display: initial;">
      <option value="">不选</option>
      {foreach $citys as $k=>$v}
        <option value="{$v['id']}" {if $city==$v['id']}selected{/if}>{$v['name']}</option>
      {/foreach}
    </select>

    <!--          <label for="county">选择区县</label>
    <select name="county" id="county" class="form-control" style="width:140px;display: initial;">
    </select> -->

    <button type="button" class="btn btn-primary" onclick="city_query();"><span class="bi-search"></span></button>
    {if !count($data)}
      <button type="button" class="btn btn-warning" onclick="copy();"><span class="bi-clipboard">复制总部价格</span></button>
    {/if}

    {$prov},{$city}

  </div>
</form>

      <table class="table table-sm table-striped" border="1">
        <thead class="table-info">
          <th>序号</th>
          <th>区域</th>
          <th>项目名称</th>
          <th>说明</th>
          <th>金额</th>
          <th>优惠价</th>
          <th>宣传图片</th>
          <th>
            <button class="btn btn-sm btn-primary" id="new_item"><span class="bi-plus"></span></button>
          </th>
        </thead>
        <tbody>
          {foreach $data as $k=>$v}
          <tr class="fee_item" > 
            <td class="_id" style="padding: 0 10px;">{$v['id']}</td>
            <td class="_city" style="color:blue;">{$v['city']['name']}</td>
            <td class="_name">{$v['name']}</td>
            <td class="_desc">{$v['desc']}</td>
            <td class="_price">{$v['price']}</td>
            <td class="_price1">{$v['price1']}</td>
            <td class="_text" style="display: none;">{$v['text']}</td>
            <td >
              <img class="goods_image" src="{$v['image']}" style="width:40px;border:1px solid #ccc;" />
            </td>
            <td>
              <button class="btn btn-sm btn-secondary"><span class="bi-pencil"></span></button>
             </td>
          </tr>
          {/foreach}

        </tbody>
      </table>

<!--  <button class="btn btn-primary" id="new_item">
        <span class="bi-plus">新增收款项</span>
      </button> -->
      <br/>

      <!-- <button type="button" class="btn btn-info" id="save">保存设定</button>     -->
      <div id="mask"></div>
      <br/>
      <form method="post" id="item-form" enctype="multipart/form-data" action="/index.php/cat/fee_setup" style="">

        <h3 class="text-center"><c id="edit_name"></c>项目
        <input type="hidden" id="id" name="id" value="" /></h3>
        <input type="hidden" name="fee_setup" value="1" />
        <input type="hidden" id="city" name="city" value="{$city}" readonly  />
        <br/>
        <div class="mb-3 row">
          <div class="col-2"><label for="title" class="form-label">项目名称:</label></div>
          <div class="col-10"><input type="text" class="form-control" id="name" name="name" value="" placeholder="" /></div>
        </div>
        <div class="mb-3 row">
          <div class="col-2"><label for="desc" class="form-label">说明:</label></div>
          <div class="col-10"><input type="text" class="form-control" id="desc" name="desc" value="" placeholder="" /></div>
        </div>
        <div class="mb-3 row">
          <div class="col-2"><label for="price" class="form-label">金额:</label></div>
          <div class="col-10"><input type="text" class="form-control" id="price" name="price" value="" placeholder="" /></div>
        </div>

        <div class="mb-3 row">
          <div class="col-2"><label for="price1" class="form-label">优惠价:</label></div>
          <div class="col-10"><input type="text" class="form-control" id="price1" name="price1" value="" placeholder="" /></div>
        </div>
        
        <div class="mb-3 row">
          <div class="col-2"><label for="file" class="form-label">上传图片:</label></div>
          <div class="col-10">
            <img src="" id="img" alt="image" style="width: 60px;border:1px solid #ccc;"/>
            <input id="file" type="file"  name="file" />
          </div>
        </div>  

      <div class="mb-3 row">
        <div class="col-2"><label for="title" class="form-label">详细介绍:</label></div>
        <div class="col-10"><textarea id="text" name="text" class="form-control"></textarea></div>
      </div>  

        <button type="button" class="btn btn-primary" onclick="doSave();" style="display: inline;">提交保存</button>
      </form>



<!--       <div style="margin:20px 0;font-size:larger;color:#red;">
        说明： 两个金额都设置为0，系统会删除此项目！
      </div> -->
    </div>



<script type="text/javascript">
    var editor = Jodit.make('#text',{
      toolbarButtonSize: 'small',
      language: 'zh_cn',
    });

function doSave(){
  if(!$("#city").val()) {
    layer.msg('请选择省市！');
    return 0;
  }

  $("form").submit();
}

function copy(){
  if(!$("#citys").val()) {
    return;
    layer.msg('请选择城市生成初始报价！')
  }

  $.post('/cat/fee_init',{city:$("#citys").val()},function(res){
    if(res.code){
      window.location.reload();
    }else
      layer.msg(res.msg);
  })
}

function city_query(){
  var city=$("#citys").val();
  $("#city_query").submit();
}

$(document).ready(function(){
    $("#mask").on('click',function(){
      $("#item-form").hide();
      $(this).hide();
    })

    $(".goods_image").on('click',function(){
        var img = $(this).attr('src');
        if(!img.trim()) return;

        layer.open({
          type: 1,
          title:'',
          closeBtn: 0, //不显示关闭按钮
         // anim: 1,
          time: 5*1000,
          shadeClose: true, //开启遮罩关闭              
          skin: 'layui-layer-rim', 
          content: "<img src='"+img+"' style='width:100%'>"
        });
    })
  
  //新增项目
  $("#new_item").on('click',function(){
    if(!$("#citys").val()) {
      layer.msg('请选择城市！');
      return;
    }

    $("#edit_name").text('新增');
    $("#id").val('');
    $("#city").val($("#citys").val());
    $("#name").val('');
    $("#desc").val('');
    $("#price").val('');
    $("#price1").val('');        
    //$("#text").val(''); 
    editor.value='';       
    $("#mask").show();
    $("#item-form").show();
  })

  $(".btn-secondary").on('click',function(){
    $("#edit_name").text('编辑');
    var el=$(this).parents('tr');
    var id=el.find('._id').text(); 

    $("#id").val(id);
    $("#name").val(el.find('._name').text());
    $("#desc").val(el.find('._desc').text());
    $("#price").val(el.find('._price').text());
    $("#price1").val(el.find('._price1').text());
    //$("#text").text(el.find('._text').text());
    $("#img").attr('src',el.find('img').attr('src'));
    editor.value=el.find('._text').text();
    $("#mask").show();
    $("#item-form").show();

  })

  $("#prov").on('click',function(res){
    var fid=$(this).val();
    if(!fid) {
      $("#citys").empty();
      return;
    }
  
    $.post('/sys/city_list',{fid:fid},function(res){
      var ops = "<option value=''>不选</option>";

      for(var i=0;i<res.length;i++){
        ops +="<option value='"+res[i].id+"'>"+res[i].name+"</option>";
      }
      if(!ops) ops="<option value='"+fid+"'>"+$(this).text()+"</option>";
      $("#citys").empty().html(ops);

    })
  })

  $("#citys").on('change',function(res){
    var fid=$(this).val();
    if(fid)   $("#city").val(fid);
    // $.post('/sys/city_list',{fid:fid},function(res){
    //   var ops = "";

    //   for(var i=0;i<res.length;i++){
    //     ops +="<option value='"+res[i].id+"'>"+res[i].name+"</option>";
    //   }
    //   if(!ops) ops="<option value='"+fid+"'>"+$(this).text()+"</option>";
    //   $("#county").empty().html(ops);

    // })
  })



})


</script>


</body>
</html>
